<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>测试position</title>
		<link rel="stylesheet" href="../css/position.css" />
	</head>
	<body>
		<!-- https://www.w3cschool.cn/css/css-positioning.html -->
		<div class="top" id="top">
			<div class="topToolBar1">
				<div id="back">返回 </div>
				<div id="search"> 搜索 </div>
				<div id="msg">消息</div>
			</div>
			<div class="topTab">tab</div>
		</div>

		<div class="middle" id="middle">

			<div class="middle-child1">
				<div class="middle-child1-1">
child1-1
				</div>

				<div class="middle-child1-2">
child1-2
				</div>

				<div class="middle-child1-3">
child1-3
				</div>

				<div class="middle-child1-4">
child1-4
				</div>

			</div>

			<div class="middle-child2">child2</div>

		</div>
		<div class="bottom1" id="bottom1">
			<h3>底部1</h3>
		</div>
		<div class="bottom2" id="bottom2">
			<h3>底部2</h3>
			<p>
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
			</p>
			<p>
				hello hellohellohellohellohellohellohellohello
				wordwordwordwordwordwordwordwordwordwordword
			</p>
			<p>
				endendendendendendendendendendendendendendendL
			</p>
		</div>
		<div class="bottomTip">
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			bfdhhhtjtujuj6t
		</div>

	</body>
</html>